<template>
  <div>
    <div id="" style="margin-bottom: 10px;" class="clearfix">
      <header class="base-header">
        <i class="icon-menu" @tap="$router.go('classify')"></i>
        <div class="search-block">
          <input type="text" placeholder="关键字" v-model="keyword" @keyup.13="search">
          <i class="search-icon" @tap="search"></i>
        </div>
        <div class="nav" @tap="$router.go('news')">
          <i class="icon-chat"></i>
          <b class="shop" v-if="data.count>0">{{data.count}}</b>
        </div>
      </header>
      <div class="indexScroll">
      <mui-scroll-refresh top='0px' bottom='61px' style="background:white;">
      
        <div class="gallery clearfix" style="margin-top:50px;">
          <div class="mui-slider">
            <div class="mui-slider-group mui-slider-loop">
            <!--支持循环，需要重复图片节点-->
            <div class="mui-slider-item mui-slider-item-duplicate">
              <a :href="data.bannerData[data.bannerData.length-1].url">
                <img :src="data.bannerData[data.bannerData.length-1].imageUrl" @load="intiSlider"/>
              </a>
            </div>
            <div class="mui-slider-item" v-for="banner in data.bannerData">
              <a :href="banner.url">
                <img :src="banner.imageUrl" @load="intiSlider"/>
              </a>
            </div>
             <!--支持循环，需要重复图片节点-->
            <div class="mui-slider-item mui-slider-item-duplicate">
              <a :href="data.bannerData[0].url">
                <img :src="data.bannerData[0].imageUrl" @load="intiSlider"/>
              </a>
            </div>
          </div>
          <div class="mui-slider-indicator">
            <div class="mui-indicator" v-for="n in data.bannerData"></div>
          </div>
        </div>
      
      <div class="module-bg">
        <div class="mui-content">
          <div class="mui-row">
            <div class="mui-col-xs-3" v-for="icon in data.icons">
              <div class="mui-table-view-cell">
                <a :href="icon.url" class="entrance">
                  <p><img :src="icon.imageUrl"/></p>
                  <p>{{icon.name}}</p>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="recommended module-bg" >
      <div class="herder-panle">
        <span>{{ data.dictionary.dicValue }}</span>
        <i  @tap="goAllGoodsList">查看全部 ></i>
      </div>
      <div class="indexGoods">
        <div class="addressScroll">
          
            <div class="mui-col-xs-6" @tap="lookGoods(item.id)" v-for="item in data.indexGoods">
              <div class="mui-table-view-cell mui-table-view-chevron">
                <div class="goods">
                  <p class="good-img">
                    <img :src="item.imageUrl"/>
                  </p>
                  <p class="title" style="padding:0;">{{ item.name }}</p>
                  <p class="poin">{{ item.point }}积分</p>
                  <p class="pic-dele">参考价:&yen;{{ item.referencePrice }}</p>
                </div>
              </div>
            </div>
          
        </div>
      </div>
    </div>
    
    </mui-scroll-refresh>
    </div>
    </div>
    <footer style="z-index:111;bottom:0px;height:47px;">
      <div class="base-manu" style="background-color:#ffffff" ;>
        <a class="manu index-link active">
          首页
        </a>
        <a class="manu cart-link" href="../../shoppingCart/index.html">
          购物车
          <b class="shop1" v-if="data.total > 0">{{data.total}}</b>
        </a>
        <a class="manu user-link" href="../../we/index.html">
          我的
        </a>
      </div>
    </footer>
  </div>
</template>

<script>
  require('../../public/images/msg.png');
  require('../../public/images/point.png');
  require('../../public/images/category.png');
  require('../../public/images/mall-icon.png');
  require('../../public/images/health.png');
  require('../../public/images/products.png');
  require('../../public/images/instrument.png');
  import store from '../mall-store';
  import scrollRefresh from '../../public/components/mui-scroll-refresh/mui-scroll-refresh.vue';
  export default {
    data: function () {    // 组件的数据格式
      return {
        data: store.state,
        keyword: ''
      };
    },
    components: {
      'mui-scroll-refresh': scrollRefresh
    },
    watch: {
      $route: function (to) {
        store.getCarts();
        store.getIsNewCount();
      }
    },
    methods: {
      intiSlider: function () {
        var gallery = mui('.mui-slider');
        gallery.slider({
          interval: 2000
        });
      },
      more: function () {
        this.$router.go({name: 'dictionaryGoodsList', params: {'dictionary': this.data.dictionary.dicKey}});
      },
      search: function () {
        this.$router.go({name: 'goodsList', query: {keyword: this.keyword}});
      },
      goAllGoodsList: function () {
        this.$router.go({name: 'goodsList'});
      },
      lookGoods: function (id) {
        store.lookGoodsDetail(id);
      }
    },
    created: function () {
      // 运行 数据中转站的函数
      var data = this.$route.params.data;
      if (data) {
        store.loginFromApp(data);
      } else {
        store.getBanner();
        store.getIcons();
        store.getDictionary();
        store.getIsNewCount();
        store.getCarts();
      }
    },
    events: {
      pullRefreshReady: function (scroll) {
        store.setScroll(scroll);
      },
      pulldown: function () {
        store.getIndexGoodsUP();
      },
      pullup: function () {
        store.getIndexGoods();
      }
    },
    ready: function () {
      mui('body').on('tap', 'a', function () {
        window.location.href = this.href;
      });
    }
  };
</script>
